<!DOCTYPE html>
<html class="Content">
<head>
    <title>xUnit.js: Hello, xUnit.js</title>
    <link type="text/css" rel="Stylesheet" href="../../Style/documentation.css" />
</head>
<body>
    <h1>Hello, xUnit.js</h1>
    <p>
        This example is based on <em>Examples/Source/Hello xUnit/Hello.xUnit.js</em> and <em>Examples/Tests/Hello xUnit/Hello.xUnitTests.js</em> from <a href="examples.zip">examples.zip</a>.
    </p>
    <p>
        We'll start with a very naive, simplistic class, with three simple methods.
    </p>
    <h3>Source:</h3>
    <p>
        <span class="Code">
Function.RegisterNamespace("Hello");

Hello.xUnit=function(domId){

	this.Alert=function(){
		alert(this.GetMessage());
	};

	this.GetElement=function(){
		return document.getElementById(domId);
	}

	this.GetMessage=function(){
		return "Hello, xUnit!";
	};

}
        </span>
    </p>
    <p>
        Right off, we can see that the <em>Alert()</em> and <em>GetElement()</em> methods depend on a browser host implementation, which is not available in the 
        console hosts that we have chosen to exercise our class. The <em>GetMessage()</em> method has no dependencies, so we can start with that test:
    </p>

    <h3>Tests:</h3>
    <p>
        <span class="Code">
Function.RegisterNamespace("Test.Hello.xUnit");

[Import("../../Source/Hello xUnit/Hello.xUnit.js")]
[Fixture]
Test.Hello.xUnitTests=function(){

	[Fixture]
	function GetMessage(){

		[Fact]
		function ReturnsMessage(){
			// Arrange
			var expected="Hello, xUnit!";
			var target=new Hello.xUnit();

			// Act
			var actual=target.GetMessage();

			// Assert
			Assert.Equal(expected, actual);
		}

	}

}
        </span>
    </p>
    <p>
        This is as simple (and contrived) as it gets: We declare our expectation, instantiate the class, collect the (actual) result, and compare it with our expectation.
    </p>
    <p>
        So far, so good. Let's take a look at the <em>Alert()</em> method. Two things jump out at us:
    </p>
    <ol>
        <li>We need a global <em>alert()</em> method.</li>
        <li>The result of the <em>GetMessage()</em> method is passed into that <em>alert()</em> method.</li>
    </ol>
    <p>Translating this into behavioral promises, we care that:</p>
    <ol>
        <li>The <em>alert()</em> method is called.</li>
        <li>The message it receives is the result of our own <em>GetMessage()</em> method.</li>
    </ol>
    <p>
        Both of these behaviors can be verified in a single test, by verifying that the argument received in <em>alert()</em> matches our expectation; in other words, if
        we explicitly test that the correct message is passed into <em>alert()</em>, we implicitly know that <em>alert()</em> was called.
    </p>
    <p>
        To do this, we need a global <em>alert()</em> method. Of course, we don't want to simply define it; that would pollute the global state for the remainder of the tests and 
        source code that executes in our run. Instead, we'll use a <a href="../Engine/mocks-and-stubs.html">Mock</a>, which will clean up after itself:
    </p>
    <h3>Tests:</h3>
    <p>
        <span class="Code">	
Function.RegisterNamespace("Test.Hello.xUnit");

[Import("../../Source/Hello xUnit/Hello.xUnit.js")]
[Fixture]
Test.Hello.xUnitTests=function(){
    
	[...]

	[Fixture]
	function Alert(){

		[Fact]
		function AlertsMessage(){
			// Arrange
			var mockAlert=Mocks.GetMock(Object.Global(),"alert",
				function(targetMessage){
					actual=targetMessage;
				}
			);
			var target=new Hello.xUnit();
			var expected=target.GetMessage();
			var actual=null;

			// Act
			mockAlert(function(){
				target.Alert();
			})
			
			// Assert
			Assert.Equal(expected,actual);
		}

	}

}
        </span>
    </p>
    <p>
        We set up our mock, which overrides (in this case, by creating) the global <em>alert</em> method with our own function; this function accepts a targetMessage parameter, and stores 
        the argument passed into it as our actual. We then collect our expectation from the target instance of our class, and invoke the target<em>.Alert()</em> method inside the
        delegate we pass to our mock. Finally, we compare our expectation to our result.
    </p>
    <p>
        The final method on our class, <em>GetElement()</em> is even trickier; now, we need:
    </p>
    <ol>
        <li>A global <em>document</em> reference,</li>
        <li>With a valid <em>getElementById()</em> method,</li>
        <li>Which accepts an <em>id</em> parameter,</li>
        <li>And returns the result of that <em>getElementById()</em> method.</li>
    </ol>
    <p>Translating into behavioral promises again, we care that:</p>
    <ol>
        <li>The <em>document.getElementById()</em> method is called,</li>
        <li>With the <em>domId</em> argument received by the constructor,</li>
        <li>And returns the result of the <em>getElementById()</em> method.</li>
    </ol>
    <p>        
        This time, we can collapse the promises into two separate tests: The method calls the dom with the expected argument; and the return value 
        from the dom is returned by <em>GetElement()</em>.
    </p>
    <h3>Tests:</h3>
    <p>
        <span class="Code">
Function.RegisterNamespace("Test.Hello.xUnit");

[Import("../../Source/Hello xUnit/Hello.xUnit.js")]
[Fixture]
Test.Hello.xUnitTests=function(){
    
	[...]

	[Fixture]
	function GetElement(){

		[Fact]
		function CallsGetElementByIdWithConstructorId(){
			// Arrange
			var mockDocument=Mocks.GetMock(Object.Global(),"document",{
				getElementById:function(targetId){
					actual=targetId;
				}
			});
			var expected="expected";
			var actual=null;

			// Act
			mockDocument(function(){
				new Hello.xUnit(expected).GetElement();
			});

			// Assert
			Assert.Equal(expected,actual);
		}

		[Fact]
		function ReturnsElementFromDom(){
			// Arrange
			var mockDocument=Mocks.GetMock(Object.Global(),"document",{
				getElementById:function(){
					return expected;
				}
			});
			var expected="expected";
			var actual=null;

			// Act
			mockDocument(function(){
				actual=new Hello.xUnit().GetElement();
			});
	
			// Assert
			Assert.Equal(expected,actual);			
		}

	}

}
        </span>
    </p>
    <p>
        Compare the behavior of the <em>getElementById()</em> methods in the separate mocks of each of the two tests above to understand how we fulfill the promises we set out to make.
        In the first case, we collect the value supplied as an argument; in the second case, we return a known value to compare against. 
    </p>
    <p>
        This is the essence of boundary control.
    </p>
</body>
</html>